<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    	*{margin:0;padding:0;}
    	body,html{width: 100%;height:100%;}
    </style>
</head>
<body>
<div id="vbarChart" style="width:100%;height:100%;"></div>
<script src="../components/echarts-4.0.4.min.js"></script>
<script>
    var vbarChart = echarts.init(document.getElementById('vbarChart'));
    var colors = ['#67c47b','#8ce8e7','#4fac88','#17d4ee','#62cff1','#59c293','#336c9c']

    barOption = {
        title: {
            text: '2017年仪器设备共享次数',
            left: 'center',
            top:'20%',
            textStyle: {
                color: '#fff',
                fontSize: 22
            }
        },
        backgroundColor:'#0A0F23',
        legend: {
            show:true,
            textStyle: {
                color: '#fff',
                fontSize: 16
            },
            // bottom:'1%',
            left:'5%',
            top:'30%',
            right:'5%',
            orient: 'vertical',
            containLabel: true,
            itemWidth: 10,
            itemHeight: 10,
            icon: 'rect',
            data:['电子测量仪器','计量仪器','工程试验设备','分析仪器','物理性能测试','特种检测仪器','其他仪器']
        },
        color:colors,
        grid: {
            left: '20%',
            right: '10%',
            bottom: '10%',
            top:'30%',
            containLabel: true
        },
        xAxis : [
            {
                boundaryGap : false,
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                nameTextStyle: {
                    color: '#fff'
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                         color: 'rgba(204, 204, 204, 0.3)'
                     }
                },
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [

            {
                type : 'value',
                interval: 2000,
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff'
                    }
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                         color: 'rgba(204, 204, 204, 0.31)'
                     }
                }
            }
        ],
        series : [
            {
                name:'电子测量仪器',
                type:'line',
                smooth: true,
                stack: '总量',
                animationDuration: 2000,
                animationDelay: 12000,
                areaStyle: {
                    normal: {
                        color: '#67c47b'
                    }
                },
                data:[1000, 1110, 1201, 1254, 990, 1330, 1210, 1242, 1201, 1354,1250,1560]
            },
            {
                name:'计量仪器',
                type:'line',
                smooth: true,
                stack: '总量',
                animationDuration: 2000,
                animationDelay: 10000,
                areaStyle: {
                    normal: {
                        color: '#8ce8e7'
                    }
                },
                data:[893, 882, 791, 834, 890, 930, 910, 882, 820, 854,750,790]
            },
            {
                name:'工程试验设备',
                type:'line',
                smooth: true,
                stack: '总量',
                animationDuration: 2000,
                animationDelay: 8000,
                areaStyle: {
                    normal: {
                        color: '#4fac88'
                    }
                },
                data:[1991, 2100, 2001, 2154, 2490, 2330, 2410, 2242, 2220, 2354,2450,2560]
            },
            {
                name:'分析仪器',
                type:'line',
                smooth: true,
                stack: '总量',
                animationDuration: 2000,
                animationDelay: 6000,
                areaStyle: {
                    normal: {
                        color: '#17d4ee'
                    }
                },
                data:[3692, 3532, 3201, 3394, 3590, 3130, 3220, 3242, 2901, 3354,3230,3560]
            },
            {
                name:'物理性能测试',
                type:'line',
                 smooth: true,
                stack: '总量',
                animationDuration: 2000,
                animationDelay: 4000,
                areaStyle: {
                    normal: {
                        color: '#62cff1'
                    }
                },
                data:[1252, 1932, 901, 934, 1290, 1330, 1320, 1242, 2201, 1554,1420,1860]
            },
            {
                name:'特种检测仪器',
                type:'line',
                 smooth: true,
                stack: '总量',
                animationDuration: 2000,
                animationDelay: 2000,
                areaStyle: {
                    normal: {
                        color: '#59c293'
                    }
                },
                data:[3435, 3932, 3901, 3434, 3290, 3330, 3320, 3242, 3201, 3254,3540,3950]
            },
            {
                name:'其他仪器',
                type:'line',
                 smooth: true,
                stack: '总量',
                animationDuration: 2000,
                areaStyle: {
                    normal: {
                        color: '#336c9c'
                    }
                },
                data:[1246, 2232, 1201, 2234, 2290, 2130, 1230, 1222, 1201, 2254,1290,2201]
            }
        ]
    };

    vbarChart.setOption(barOption);
    </script>
</body>
</html>